<template>

  <div class="dia" :style="{width,height}" v-if="showFlag">
    <h1>{{title}}</h1>
    <main>

   <slot></slot>
    </main>
      
  
    
  </div>

</template>
<script>
export default{
    name:'DiaLog',
    props:{
      title:String,
      width:{
        type:String,
        default:'50%'
      },
      height:{
        type:String,
        default:'50%'
      },
      showFlag:Boolean
    },
    data () {
        return {
            
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang='less'  scoped>
    .dia {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content:space-evenly;
  flex-direction: column;
}
.dia h1 {
  color: #fff;
}
</style>
